<template>
  <div>
    <h1>Vue3中，defineProps接收父组件传参+限制传参必要性+withDefaults指定默认值</h1>
    <h5>使用ts泛型限制类型的数据</h5>
    <div>person：{{ person }}</div>
    <div>personList：{{ personList }}</div>
    <h5>父组件传过来的参数或默认值</h5>
    <div>
      props list:
      <ul>
        <!-- 遍历注意要添加唯一标识key，不加的话默认以索引值作为key，以索引值作为key的话在更新数据时容易错乱 -->
        <li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}岁 {{ item.grade }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts" name="PropsView">
// 接口是一种约束（规范），不是值，在导入时要在前面加上type
import { type PersonInter, type Persons } from "@/types"

// defineXxx属于宏函数，是不需要手动引入的，vue的函数ref、reactive这些通过unplugin-auto-import插件自动引入了，这里也不需要手动引入

// 接收list
// const props = defineProps(["list"])
// console.log("props", props)

// 接收list + 限制list的类型
// defineProps<{ list: Persons }>()

// 接收list + 限制list的类型 + 限制必要性（加个?将必传值变成可选传值） + withDefaults指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: "p-1", name: "王五", age: 20 }],
})

// 定义一个变量person，这个person变量要符合PersonInter这个接口规范
const person: PersonInter = { id: "1", name: "张三", age: 15 }
// 定义一个变量personList，这个personList变量是一个数组，数组里的每一项都要符合PersonInter这个接口规范，泛型
// const personList: PersonInter[] = [
const personList: Persons = [
  { id: "1", name: "张三1", age: 15 },
  { id: "2", name: "张三2", age: 23 },
  { id: "3", name: "张三3", age: 56 },
]
</script>

<style scoped></style>
